<script setup>
import {reactive, ref} from "vue";
import {GET, POST, PUT} from "../../../api/index.js";

const dialogFormVisible = ref(false)
const emit = defineEmits(['ok'])
const form = reactive({
  id: '',
  code: '',
  name: '',
  exchangeCode: '',
  sort: 0,
  transactionsMultiplier: 0,
  marginRate: 0,
  commission: 0,
  commissionType: 1,
  upPrice: null,
  downPrice: null,
})
const options = ref([])

const open = (row) => {
  if(row&& row.id){
    form.id = row.id
    form.code = row.code
    form.name = row.name
    form.exchangeCode = row.exchangeCode
    form.sort = row.sort
    form.marginRate = row.marginRate
    form.transactionsMultiplier = row.transactionsMultiplier
    form.commission = row.commission
    form.commissionType = row.commissionType
    form.upPrice = row.upPrice
    form.downPrice = row.downPrice

  }

  dialogFormVisible.value = true
}

const saveHandle = () => {
  if(form.id) {
    PUT('/futures/variety', form).then(res => {
      dialogFormVisible.value = false
      emit('ok')
    })
  } else {
    POST('/futures/variety', form).then(res => {
      dialogFormVisible.value = false
      emit('ok')
    })
  }

}

const getList = () => {
  GET("/futures/exchange/list").then(res => {
    options.value = res.data
  }).catch(() => {
  })
}
getList()

defineExpose({
  open
})
</script>

<template>
  <el-dialog v-model="dialogFormVisible" title="编辑" width="800">
    <el-form :model="form" label-width="100">
      <el-form-item label="代码">
        <el-input v-model="form.code" autocomplete="off" disabled />
      </el-form-item>
      <el-form-item label="名称">
        <el-input v-model="form.name" autocomplete="off" disabled/>
      </el-form-item>
<!--      <el-form-item label="交易乘数">-->
<!--        <el-input-number v-model="form.transactionsMultiplier"/>-->
<!--      </el-form-item>-->
<!--      <el-form-item label="保证金率">-->
<!--        <el-input-number v-model="form.marginRate"/>-->
<!--      </el-form-item>-->
<!--      <el-form-item label="手续费类型">-->
<!--        <el-radio-group v-model="form.commissionType">-->
<!--          <el-radio :value="1">固定</el-radio>-->
<!--          <el-radio :value="2">百分比</el-radio>-->
<!--        </el-radio-group>-->
<!--      </el-form-item>-->
<!--      <el-form-item label="手续费">-->
<!--        <el-input-number v-model="form.commission"/>-->
<!--      </el-form-item>-->
      <el-form-item label="排序">
        <el-input-number v-model="form.sort" :min="0" />
      </el-form-item>
      <el-form-item label="上涨目标价">
        <el-input-number v-model="form.upPrice"/>
      </el-form-item>
      <el-form-item label="下跌目标价">
        <el-input-number v-model="form.downPrice"/>
      </el-form-item>
      <el-form-item label="交易所">
        <el-select
            v-model="form.exchangeCode"
            placeholder="Select"
            disabled
        >
          <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.name"
              :value="item.code"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="saveHandle">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss">

</style>